<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc." />
    <meta name="author" content="haijun.liu" />
    <title>菜单管理</title>
    <link th:href="@{/images/favicon_1.ico}" rel="shortcut icon">
    <link  rel="stylesheet" type="text/css"  th:href="@{/plugins/sweetalert/dist/sweetalert.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/plugins/morris.js/morris.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/bootstrap.min.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/bootstrap-table.css}"  />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/bootstrap-dialog.css}"  />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/bootstrap-treeview.css}"  />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/core.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/icons.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/components.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/pages.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/menu.css}" />
    <link  rel="stylesheet" type="text/css"  th:href="@{/css/responsive.css}"  />

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/bootstrap-table.js}"></script>
    <script th:src="@{/js/bootstrap-dialog.js}"></script>
    <script th:src="@{/js/bootstrap-treeview.js}"></script>
    <script th:src="@{/js/bootstrap-table-zh-CN.js}"></script>
    <script th:src="@{/js/modernizr.min.js}"></script>
    <script th:src="@{/js/app.js}"></script>


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <script type="text/javascript">
        var tree = [
            {
                text: "Parent 1",
                nodes: [
                    {
                        text: "Child 1",
                        nodes: [
                            {
                                text: "Grandchild 1"
                            },
                            {
                                text: "Grandchild 2"
                            }
                        ]
                    },
                    {
                        text: "Child 2"
                    }
                ]
            },
            {
                text: "Parent 2"
            },
            {
                text: "Parent 3"
            },
            {
                text: "Parent 4"
            },
            {
                text: "Parent 5"
            }
        ];
        $(function(){
            $('#tree').treeview({data:tree});

            /*bootstrap table*/
            $('#table').bootstrapTable({
                url:"/system/menu/list",//请求数据url
                queryParams: function (params) {
                    return {
                        offset: params.offset,  //页码
                        limit: params.limit,   //页面大小
                        search : params.search, //搜索
                        search : params.search, //搜索
                        order : params.order, //排序
                        ordername : params.sort, //排序
                    };
                },
                toolbar:"#toolbar",
                checkboxHeader: true,
                clickToSelect:true,
                showHeader : true,
                showColumns : true,
                showRefresh : true,
                pagination: true,//分页
                sidePagination : 'server',//服务器端分页
                pageNumber : 1,
                pageList: [10, 15, 20],//分页步进值
                search: true,//显示搜索框
                detailView:true,
                //表格的列 data-checkbox="true"
                columns: [
                    {
                        field: '选择',//域值
                        title: '全选',//标题
                        checkbox:true
                    },
                    {
                        field: 'name',
                        title: '菜单名称',
                        visible: true,
                        sortable: true,
                        width : '10%',
                    },
                    {
                        field: 'url',
                        title: '路径',
                        visible: true,
                        width : '20%',
                        editable:true,
                    },
                    {
                        field: 'code',
                        title: '编码',
                        visible: true,
                        width : '10%',
                        editable:true,
                    },
                    {
                        field: 'level',
                        title: '等级',
                        visible: true,
                        width : '10%',
                        editable:true,
                    },
                    {
                        field: 'remark',
                        title: '备注',
                        visible: true,
                        width : '10%',
                        editable:true,
                    },
                    {
                        field: 'createTime',
                        title: '创建时间',
                        visible: true,
                        width : '10%',
                        sortable: true,
                        editable:true,
                    },
                    {
                        field: 'createBy',
                        title: '创建人',
                        visible: true,
                        width : '10%'
                    },
                    {
                        field: 'updateTime',
                        title: '修改时间',
                        sortable: true,
                        visible: true,
                        width : '10%'
                    },
                    {
                        field: 'updateBy',
                        title: '修改人',
                        visible: true,
                        width : '10%'
                    }

                ]
            });
            /**
             * 处理添加功能
             */
            $("#btn_add").click(function () {
                $("#modal").on("hidden.bs.modal", function() {
                    $(this).removeData("bs.modal");
                });
                $("#modal").modal({
                    remote: "/system/menu/toAdd"
                });
            });

            /**
             * 处理修改功能
             */
            $("#btn_edit").click(function () {
                // 1 获取选择的行
                var sels = $('#table').bootstrapTable('getAllSelections');
                if(sels.length <1){
                    showAlert("请选择要修改的记录", function () {
                        return ;
                    })
                }else if (sels.length > 1){
                    showAlert("修改时只能选择一条记录", function () {
                        return ;
                    })
                }else{
                    // 弹出修改对话模，加载修改页面
                    $("#modal").on("hidden.bs.modal", function() {
                        $(this).removeData("bs.modal");
                    });
                    $("#modal").modal({
                        remote: "/system/help/toUpdate?id=" + sels[0].id
                    });
                }
            });

            /**
             * 处理删除功能
             */
            $("#btn_del").click(function () {
                // 1 获取选择的行
                var sels = $('#table').bootstrapTable('getAllSelections');
                if(sels.length <1){
                    // 如果没有选中的记录，则弹出提示框，提示"请选择要修改的记录"
                    showAlert("请选择要修改的记录", function () {
                        return ;
                    })
                }else if (sels.length >= 1){
                    // 2 弹出确认对话框
                    showConfirm('确定要删除？', function () {
                        var ids = [];
                        var sels = $('#table').bootstrapTable('getAllSelections');
                        // 2 判断是否有选中的行
                        if (sels.length > 0){
                            $.each(sels, function(i, value) {
                                ids.push(value.id);
                            });
                            // 3 向后台发送ajax请求进行删除
                            var options = {
                                url: '/system/help/delete',
                                type: 'post',
                                dataType: 'json',
                                data: {
                                    ids:ids.join(',')
                                } ,
                                success: function (data) {
                                    // 4 删除成功后弹出成功提示框，并且刷新表格
                                    if (data){
                                        showAlert('删除成功!',function () {
                                            $('#table').bootstrapTable('refresh', {silent: true})
                                        });
                                    }
                                }
                            };
                            $.ajax(options);
                        }
                    }, function () {
                        return ;
                    });
                }
            });
        });


    </script>
</head>



<body class="fixed-left">

<div class="row">
    <div class="col-lg-2">
        <div id="tree"></div>
    </div>
    <div class="col-lg-10">

        <div id="toolbar">
            <p>
                <button id="btn_add" type="button" class="btn btn-success"><i class="fa fa-plus"></i>添加</button>
                <button id="btn_edit" type="button" class="btn btn-warning"><i class="fa fa-edit"></i>修改</button>
                <button id="btn_del" type="button" class="btn btn-danger"><i class="fa fa-close"></i>删除</button>
            </p>
        </div>
        <table id="table"></table>


        <!-- Modal -->
        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                </div>
            </div>
        </div>

</div>



</body>
</html>